/**
 * Created by 123 on 2017/12/8.
 * 签到
 */

import React from 'react';
import {
  Text,
  View,
  StyleSheet,
  ScrollView,
  Image,
  Button,
  Alert,
  ToastAndroid
} from 'react-native';
import {Checkbox, List, DatePicker} from 'antd-mobile';
const CheckboxItem = Checkbox.CheckboxItem;
import Colors from '../../assets/colors';
let Geolocation = require('Geolocation');
import HorizontalBody from '../rectifyBill/HorizontalBody';
// import Storage  from '../../db/Storage';
import {Actions} from 'react-native-router-flux'
//现场拍照组件
import UIPhoto from '../../routes/Photograph';
//签字组件
import UISign from '../../routes/Sign';
import Dialog from '../../routes/DialogTip'
import ImagePicker from "react-native-image-picker";

const imgDefault = require('../../assets/imgs/img_default.png');

const nowTimeStamp = Date.now();
const now = new Date(nowTimeStamp);

let options = {
  title: 'Select Avatar',
  customButtons: [
    {name: 'fb', title: 'Choose Photo from Facebook'},
  ],
  storageOptions: {
    skipBackup: true,
    path: 'images'
  }
};
class SignIn extends React.Component {
  state = {
    date: now
  }
  showPicker(addPictures){
    ImagePicker.launchImageLibrary(options, (response)  => {
      console.log(response,'response')
      addPictures({type: 'signInImgs', uri: response.uri, name: 'test.jpg',
        photoAction: 'SignIn'})
    });
  }
  render() {
    const {
      taskName, taskNum, projectName, projectNum, signTime, signPlace, taskUserList, currentUserList,
      querySignInfo, setSignPlace, setCurrentUserList, signIn, setSignTime,
      liveImages, signImages,dialogText,addPictures
    } = this.props;

    return (
      <View style={styles.container}>
        <ScrollView>

          <View style={styles.horizontalStyle}>
            <View style={{flex:1}}>
              <HorizontalBody name="任务名称">
                <Text style={styles.contentStyle}>{taskName}</Text>
              </HorizontalBody>
              <View style={styles.lineStyle}/>
            </View>
            <View style={{flex:1}}>
              <HorizontalBody name="工程名称">
                <Text style={styles.contentStyle}>{projectName}</Text>
              </HorizontalBody>
            </View>
            {/*<View style={{flex:1}}>*/}
              {/*<HorizontalBody name="任务编号">*/}
                {/*<Text style={styles.contentStyle}>{taskNum}</Text>*/}
              {/*</HorizontalBody>*/}
              {/*<View style={styles.lineStyle}/>*/}
            {/*</View>*/}

          </View>
          {/*<View style={styles.horizontalStyle}>*/}
            {/*/!*<View style={{flex:1}}>*!/*/}
              {/*/!*<HorizontalBody name="工程名称">*!/*/}
                {/*/!*<Text style={styles.contentStyle}>{projectName}</Text>*!/*/}
              {/*/!*</HorizontalBody>*!/*/}
            {/*/!*</View>*!/*/}
            {/*/!*<View style={{flex:1}}>*!/*/}
              {/*/!*<HorizontalBody name="工程编号">*!/*/}
                {/*/!*<Text style={styles.contentStyle}>{projectNum}</Text>*!/*/}
              {/*/!*</HorizontalBody>*!/*/}
              {/*/!*<View style={styles.lineStyle}/>*!/*/}
            {/*/!*</View>*!/*/}
          {/*</View>*/}

          <View style={styles.horizontalStyle}>

            <View style={{flex:1}}>
              <HorizontalBody name="签到地点">
                <View style={{flex:1,display:'flex',flexDirection:'row',backgroundColor:Colors.white}}>
                  <Text style={{flex:1}}>{signPlace}</Text>
                  <View style={styles.BtnLocal}>
                    <Button title='定位'
                            onPress={()=>{
                             Geolocation.getCurrentPosition(location=>{
                             let result="" + location.coords.longitude +
                              "," + location.coords.latitude;
                               setSignPlace(result)
                               },
                             error=>{
                             Alert.alert("获取位置失败,请重新定位");
                            });
                         }}
                    />
                  </View>

                </View>

              </HorizontalBody>
              <View style={styles.lineStyle}/>
            </View>

          </View>
          <HorizontalBody name="签到人">
            <View style={{display:'flex',flexDirection:'row',backgroundColor:Colors.white}}>
              {
                taskUserList.map(i => (
                  <CheckboxItem key={i.value} onChange={() => setCurrentUserList(i.value)} style={{width:150}}>
                    {i.label}
                  </CheckboxItem>
                ))
              }
            </View>

          </HorizontalBody>


          <View style={styles.lineStyle}/>

          <Text style={styles.horizontalText}>
            现场照片
          </Text>
          <Text style={{fontSize:18,width:50,marginLeft:10}}
                onPress={() =>{this.showPicker(addPictures)}}
          >+上传</Text>
          <View style={styles.lineStyle}/>

          <UIPhoto photoType='signInImgs' photoAction='SignIn'/>

          <Text style={styles.horizontalText}>
            监督员签字
          </Text>

          <View style={styles.lineStyle}/>

          <UISign signWordType='signInSignature' signWordAction='SignIn'/>

          <View style={styles.lineStyle}/>

          <View style={{display:'flex',flexDirection:'row'}}>
            <View style={{flex:1}}>
              <View style={styles.BtnContainer}>
                <Text style={styles.btnText} onPress={signIn}>提交</Text>
              </View>
            </View>

            <View style={{flex:1}}>
              <View style={styles.BtnContainer}>
                <Text style={styles.btnText} onPress={()=>{Actions.pop()}}>取消</Text>
              </View>
            </View>
          </View>
        </ScrollView>
          {
              dialogText === ''?null:
                  <Dialog isShow={'true'} text={dialogText}/>
          }
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Colors.contentContainerBg,
  },
  imgStyle: {
    width: 100,
    height: 100,
  },
  horizontalStyle: {
    display: 'flex',
    flexDirection: 'row'
  },
  contentStyle: {
    backgroundColor: Colors.white,
    height: 50,
    paddingTop: 17,
  },
  lineStyle: {
    height: 1,
    backgroundColor: Colors.backgroundLightGray
  },
  BtnLocal: {
    backgroundColor: Colors.white,
    paddingBottom: 10,
    paddingLeft: 20,
    paddingRight: 20,
    marginTop: 5,
  },
  BtnContainer: {
    marginTop: 10,
    marginBottom:10,
    backgroundColor: Colors.contentContainerBg,
    paddingBottom: 10,
    paddingLeft: 20,
    paddingRight: 20,

  },
  btnText: {
    color: '#fff',
    fontSize: 26,
    borderRadius: 10,
    textAlign:'center',
    backgroundColor: Colors.btnPrimaryBg,
  },
  horizontalText: {
    backgroundColor: Colors.navbarBackground,
    height: 50,
    paddingTop: 17,
    color: Colors.contentContainerBg,
  }
});

export default SignIn;